I have the following code inside a POST form. When someone clicks on the input the value of pricing changes to the one the user has clicked.
The input class is just a method of altering the CSS once clicked - so you can see which was clicked last.
(function() {
$(function() {
var toggle;
return toggle = new Toggle('.toggle');
});
this.Toggle = (function() {
class Toggle {
constructor(toggleClass) {
this.el = $(toggleClass);
this.tabs = this.el.find(".hs_pricing_toggle");
this.panels = this.el.find(".panel");
this.bind();
}
show(index) {
var activePanel, activeTab;
//update tabs
this.tabs.removeClass('activate');
activeTab = this.tabs.get(index);
$(activeTab).addClass('activate');
//update panels
this.panels.hide();
activePanel = this.panels.get(index);
return $(activePanel).show();
}
bind() {
return this.tabs.unbind('click').bind('click', (e) => {
return this.show($(e.currentTarget).index());
});
}
};
Toggle.prototype.el = null;
Toggle.prototype.tabs = null;
Toggle.prototype.panels = null;
return Toggle;
}).call(this);
}).call(this);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hs_pricing_toggle__wrapper" id="toggle__wrapper">
<input class="price1 hs_pricing_toggle" type="" id="pricing" name="pricing" placeholder="5" value="5" required/>
<input class="price2 hs_pricing_toggle" type="" id="pricing" name="pricing" placeholder="10" value="5" required/>
<input class="price3 hs_pricing_toggle" type="" id="pricing" name="pricing" placeholder="15" value="5" required/>
<input class="price4 hs_pricing_toggle" type="" id="pricing" name="pricing" placeholder="insert value" required/>This just changes the CSS of the class 'hs_pricing_toggle' and shows a within the class pannel. Nothing important in this case - I guess.